<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="active">
      <van-tab title="全部"></van-tab>
      <van-tab title="待支付"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>
    </van-tabs>
    <div v-if="orderList.length > 0">
      <order-list-item v-for="item in orderList" :key="item.order_id" :item="item" @changeItem="handleChange($event)"></order-list-item>
    </div>
    <div class="empty" v-else>
      <div class="empty-one">
        <img :src="emptyImg" alt="">
      </div>
      <p>暂无订单信息</p>
    </div>
  </div>
</template>

<script>
import OrderListItem from '@/components/OrderListItem.vue'
import emptyImg from '@/assets/empty.png'
import handleGetOrder from '@/mixins/index'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  mixins: [handleGetOrder],
  data () {
    return {
      typeList: [
        'all',
        'payment',
        'delivery',
        'received',
        'comment'
      ],
      orderList: [],
      dataType: this.$route.query.dataType || 'all',
      emptyImg
    }
  },
  computed: {
    active: {
      get () {
        const index = this.typeList.indexOf(this.dataType)
        return index
      },
      set (newValue) {
        this.dataType = this.typeList[newValue]
        this.getOrders()
      }
    }
  },
  created () {
    this.getOrders()
  },
  methods: {
    // async getOrders () {
    //   const res = await getOrderList(this.dataType)
    //   this.orderList = res.data.list.data
    //   // console.log(this.orderList)
    // },
    handleChange (e) {
      this.getOrders()
      this.$toast(e)
    }
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
.empty {
  height: 100vh;
    .empty-one {
      width: 100%;
      height: 50vw;
      // background: #fa2209;
      position: relative;
      img {
        height: 100px;
        width: 150px;
        position: absolute;
        left: 50%;
        margin-top: 35%;
        transform: translate(-50%, -50%);
      }
    }
    p {
      height: 9vw;
      // background: #ff9779;
      text-align: center;
      line-height: 10vw;
      font-size: 14px;
      color: #aeadaa;
      margin-bottom: 10px;
    }
  }
</style>
